<!-- 商品统计 -->
<template>
    <div class="commodityRecord">
        <div class="commodity">
            <div class="header">商品统计</div>
            <div class>
                <div>
                    <span class="demonstration">店铺：</span>
                    <el-select v-model="commodity.shop" filterable placeholder="请选择店铺" @change="getShopCounts(1)">
                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </div>
            </div>
            <!-- 表格 -->
            <el-table :data="tableShopData" max-height="500" min-height="200" border style="width: 100%">
                <el-table-column prop="shopTotal" label="总商品数量"></el-table-column>
                <el-table-column prop="syncCount" label="商品对接数量"></el-table-column>
                <el-table-column prop="shopResult" label="对接率"></el-table-column>
            </el-table>
        </div>
        <div class="brand">
            <div class="header">品牌统计</div>
            <!-- 条件筛选 -->
            <div class="screen">
                <div style="margin-top:4px">
                    <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" >导出</el-button>
                </div>
                <div class>
                    <span class="demonstration">时间：</span>
                    <el-date-picker v-model="brand.time" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" @change="getBrandCounts(1)" end-placeholder="结束日期"></el-date-picker>
                </div>

                <div class style="float:right;margin-right:0">
                    <span class="demonstration">店铺：</span>
                    <el-select v-model="brand.shop" filterable placeholder="请选择店铺" @change="getBrandCounts(1)">
                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </div>
            </div>
            <!-- 表格 -->
            <el-table :data="tableData" max-height="500" min-height="200" border style="width: 100%">
                <el-table-column prop="brandName" label="品牌名称" width="180"></el-table-column>
                <el-table-column prop="spuNum" label="品牌spu总数" width="180"></el-table-column>
                <el-table-column prop="spuDjNum" label="品牌spu对接数"></el-table-column>
                <el-table-column prop="spuNoDjNum" label="品牌未对接数量"></el-table-column>
                <el-table-column prop="purchaseQuantity" label="采购数量"></el-table-column>
                <el-table-column prop="purchaseAmount" label="采购金额"></el-table-column>
            </el-table>
            <pagination :autoScroll="false" v-show="brand.total > 0" :total="brand.total" :page.sync="brand.pageNum" :limit.sync="brand.pageSize" @pagination="getBrandCounts(1)" />
        </div>
        <div class="category">
            <div class="header">品类统计</div>
            <!-- 条件筛选 -->
            <div class="screen">
                <div style="margin-top:4px">
                    <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExportCategory()" >导出</el-button>
                </div>
                <div class>
                    <span class="demonstration">时间：</span>
                    <el-date-picker v-model="category.time" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" @change="getCategoryCounts(1)" end-placeholder="结束日期"></el-date-picker>
                </div>
                <!--缺少品类选择 -->

                <div class style="float:left;margin-left: 50px;">
                    <span class="demonstration">品类：</span>
                    <el-select v-model="category.category" filterable placeholder="请选择品类" @change="getCategoryCounts(1)">
                        <el-option v-for="item in optionsCategory" :key="item.goodsCategoryNo" :label="item.goodsCategory" :value="item.goodsCategoryNo"></el-option>
                    </el-select>
                </div>

                <div class style="float:right;margin-right:0">
                    <span class="demonstration">店铺：</span>
                    <el-select v-model="category.shop" filterable placeholder="请选择店铺" @change="getCategoryCounts(1)">
                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </div>
            </div>
            <!-- 表格 -->
            <el-table :data="tableDataCategory" max-height="500" min-height="200" border style="width: 100%">
                <el-table-column prop="categoryName" label="品类名称" width="180"></el-table-column>
                <el-table-column prop="spuNum" label="品类spu总数" width="180"></el-table-column>
                <el-table-column prop="spuDjNum" label="品类spu对接数"></el-table-column>
                <el-table-column prop="spuNoDjNum" label="品类未对接数量"></el-table-column>
                <el-table-column prop="purchaseQuantity" label="采购数量"></el-table-column>
                <el-table-column prop="purchaseAmount" label="采购金额"></el-table-column>
            </el-table>
            <pagination :autoScroll="false" v-show="category.total > 0" :total="category.total" :page.sync="category.pageNum" :limit.sync="category.pageSize" @pagination="getCategoryCounts(1)" />
        </div>
        <div class="single">
            <div class="header">单品排行</div>
            <!-- 条件筛选 -->
            <div class="screen">
                <div style="margin-top:4px">
                    <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExportItemRank()" >导出</el-button>
                </div>
                <div class>
                    <span class="demonstration">时间：</span>
                    <el-date-picker v-model="goods.time" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" @change="tableDataGoods(1)" end-placeholder="结束日期"></el-date-picker>
                </div>
            </div>
            <!-- 表格 -->
            <el-table :data="tableDataGood" max-height="500" min-height="200" border style="width: 100%">
                <!--<template slot-scope="scope">
                    <el-image class="imgs" style="width: 100px; height: 100px" :src="scope.row.mainImgUrl" :preview-src-list="scope.row.detailImgSet"> </el-image>
                </template>-->
                <el-table-column prop="categoryImg" label="商品图片" width="180">
                    <template slot-scope="scope">
                       <img width="100" :src="scope.row.categoryImg" alt />
                    </template>
                </el-table-column>

                <el-table-column prop="spuName" label="spu名称" width="180"></el-table-column>
                <el-table-column prop="goodsModel" label="货号"></el-table-column>
                <el-table-column prop="brandName" label="品牌"></el-table-column>
                <el-table-column prop="categoryName" label="一级分类"></el-table-column>
                <el-table-column prop="purchaseQuantity" label="采购数量"></el-table-column>
                <el-table-column prop="purchaseAmount" label="采购金额"></el-table-column>
            </el-table>
            <pagination :autoScroll="false" v-show="goods.total > 0" :total="goods.total" :page.sync="goods.pageNum" :limit.sync="goods.pageSize" @pagination="tableDataGoods(1)" />
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { getShopCount, getShop, getBrandCount, getCategoryList, getCategoryCount, getItemRank, exportBrandCount ,exportCategoryCount,exportItemRankCount } from '@/api/dateCenter';

export default {
    //import引入的组件需要注入到对象中才能使用
    name: 'userRecord',
    components: {},
    data() {
        //这里存放数据
        return {
            tableShopData: [],
            // 筛选数据(商品,品牌,品类,单品)
            // 商品
            commodity: {
                shop: '全部店铺' // 店铺
            },
            // 品牌
            brand: {
                time: '', // 时间
                shop: '全部店铺', // 店铺
                total: 0, // 总条数
                pageNum: 1, // 页码
                pageSize: 10 // 每页请求个数
            },
            // 单品
            goods: {
                time: '', // 时间
                total: 0,
                pageNum: 1, // 页码
                pageSize: 10 // 每页请求个数
            },
            // 品类
            category: {
                time: '', // 时间
                category: '全部品类', // 品类
                shop: '全部店铺', // 店铺
                total: 0, // 总条数
                pageNum: 1, // 页码
                pageSize: 10 // 每页请求个数
            },
            options: [],
            optionsCategory: [],
            tableData: [
            ],
            tableDataCategory: [
            ],
            tableDataGood:[],
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        // 重置
        reset() {},
        //商品统计
        getShopCounts(num) {
            if (num) {
                let datas = {
                    'shopId': this.commodity.shop
                };
                getShopCount(datas).then(res => {
                    if (res.code == 200) {
                        this.tableShopData = res.data;
                        console.log(this.tableShopData);
                    } else {
                        this.tableShopData = [];
                    }
                });
            } else {
                getShopCount().then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.tableShopData = res.data;
                    } else {
                        this.tableShopData = [];
                    }


                });
            }
        },
        //品牌统计
        getBrandCounts(num) {

            console.log(num)
            console.log(this.brand)
            if (num) {
                let datas = {
                    size: this.brand.pageSize,
                    current: this.brand.pageNum
                };
                if (this.brand.time != null) {
                    datas.startTime = this.brand.time[0];
                    datas.endTime = this.brand.time[1];
                }

                if (this.brand.shop == '全部店铺') {
                    datas.shopId = null;
                } else {
                    datas.shopId = this.brand.shop;
                };
                getBrandCount(datas).then(res => {
                    if (res.code == 200) {
                        console.log(res);
                        this.tableData = res.data.BrandCountDto;
                        this.brand.total = res.data.total;
                    } else {
                        this.tableData = [];
                    }
                });
            } else {
                let datas = {
                size: this.brand.pageSize,
                current: this.brand.pageNum
                };
                getBrandCount(datas).then(res => {
                    if (res.code == 200) {
                        console.log(res);
                        this.tableData = res.data.BrandCountDto;
                        this.brand.total = res.data.total;
                    } else {
                        this.tableData = [];
                    }
                });
            }
        },
        //品类统计
        getCategoryCounts(num) {
            if (num) {
                let datas = {
                    size: this.category.pageSize,
                    current: this.category.pageNum
                };

                if (this.category.time != null) {
                    datas.startTime = this.category.time[0];
                    datas.endTime = this.category.time[1];
                }
                if (this.category.shop == '全部店铺') {
                    datas.shopId = null;
                } else {
                    datas.shopId = this.category.shop;
                };
                if (this.category.category == '全部品类') {
                    datas.categoryId = null;
                } else {
                    datas.categoryId = this.category.category;
                };
                getCategoryCount(datas).then(res => {
                    if (res.code == 200) {
                        console.log(res);
                        this.tableDataCategory = res.data.categoryCountDto;
                        this.category.total = res.data.total;
                    } else {
                        this.tableDataCategory = [];
                    }
                });
            } else {
                let datas = {
                    size: this.category.pageSize,
                    current: this.category.pageNum
                };
                getCategoryCount(datas).then(res => {
                    if (res.code == 200) {
                        console.log(res);
                        this.tableDataCategory = res.data.categoryCountDto;
                        this.category.total = res.data.total;
                        this.tableDataGood.forEach(element => {
                            element.detailImgSet = element.detailImgSet.split(',');
                            element.detailImgSet.push(element.mainImgUrl);
                        });
                    } else {
                        this.tableDataCategory = [];
                    }
                });
            }
        },
        //单品统计
        tableDataGoods(num) {
            if (num) {
                let datas = {
                    size: this.goods.pageSize,
                    current: this.goods.pageNum
                };
                if (this.goods.time != null) {
                    datas.startTime = this.goods.time[0];
                    datas.endTime = this.goods.time[1];
                }
                getItemRank(datas).then(res => {
                    if (res.code == 200) {
                        console.log(res);
                        this.tableDataGood = res.data.produceRankDto;
                        this.goods.total = res.data.total;
                    } else {
                        this.tableDataGood = [];
                    }
                });
            } else {
                let datas = {
                    size: this.goods.pageSize,
                    current: this.goods.pageNum
                };
                getItemRank(datas).then(res => {
                    if (res.code == 200) {
                        console.log(res);
                        this.tableDataGood = res.data.produceRankDto;
                        this.goods.total = res.data.total;
                    } else {
                        this.tableDataGood = [];
                    }
                });
            }
        },
        // 获取店铺
        getShops() {
            getShop().then(res => {
                this.options = res.data;
                this.options.unshift({
                    id: null,
                    name: '全部店铺'
                });
            });
        },
        getCategoryLists() {
            getCategoryList().then(res => {
                this.optionsCategory = res.data;
                this.optionsCategory.unshift({
                    goodsCategoryNo: null,
                    goodsCategory: '全部品类'
                });
            });
        },
        /** 导出按钮操作 */
        handleExport() {
            var startTime = '';
            var endTime = '';
            var shopId = '';
            if (this.goods.time[0] == undefined) {
                startTime = '';
            } else {
                startTime = this.goods.time[0];
            };
            if (this.goods.time[1] == undefined) {
                endTime = '';
            } else {
                endTime = this.goods.time[1];
            };
            if (this.goods.shop == undefined) {
                shopId = '';
            } else {
                shopId = this.goods.shop;
            };
            console.log(this.goods)
            this.$confirm('是否确认导出品牌统计数据项?', '警告', {
                confirmButtonText: '确 定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(function () {
                    return exportBrandCount(startTime, endTime, shopId);
                })
                .then(response => {
                    //this.download(response.msg);
                    this.msgSuccess(response.msg);
                })
                .catch(function () {
                });
        },
        handleExportCategory() {
            var startTime = '';
            var endTime = '';
            var shopId = '';
            var categoryId = '';
            if (this.goods.time[0] == undefined) {
                startTime = '';
            } else {
                startTime = this.goods.time[0];
            };
            if (this.goods.time[1] == undefined) {
                endTime = '';
            } else {
                endTime = this.goods.time[1];
            };
            if (this.goods.shop == undefined) {
                shopId = '';
            } else {
                shopId = this.goods.shop;
            };
            if (this.goods.shop == undefined) {
                categoryId = '';
            } else {
                categoryId = this.goods.shop;
            };

            this.$confirm('是否确认导出品类统计数据项?', '警告', {
                confirmButtonText: '确 定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(function() {
                    return exportCategoryCount(startTime, endTime, shopId, categoryId);
                })
                .then(response => {
                    //this.download(response.msg);
                    this.msgSuccess(response.msg);
                })
                .catch(function() {});
        },
        handleExportItemRank() {
            var startTime = '';
            var endTime = '';
            if (this.goods.time[0] == undefined) {
                startTime = '';
            } else {
                startTime = this.goods.time[0];
            };
            if (this.goods.time[1] == undefined) {
                endTime = '';
            } else {
                endTime = this.goods.time[1];
            };
            this.$confirm('是否确认导出单品统计数据项?', '警告', {
                confirmButtonText: '确 定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(function() {
                    return exportItemRankCount(startTime, endTime);
                })
                .then(response => {
                    //this.download(response.msg);
                    this.msgSuccess(response.msg);
                })
                .catch(function() {});
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.getShops();
        this.getShopCounts();
        this.getBrandCounts();
        this.getCategoryCounts();
        this.getCategoryLists();
        this.tableDataGoods();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.commodityRecord {
    padding: 20px;
    box-sizing: border-box;
    background: #ffffff;
    margin: 20px;
    border-radius: 4px;
    > div {
        margin-bottom: 60px;
    }
    .header {
        width: 100%;
        height: 40px;
        font-size: 18px;
        line-height: 26px;
        padding: 0 0 0 10px;
        box-sizing: border-box;
        border-bottom: 1px solid #333;
        font-weight: 600;
        margin-top: 20px;
    }
    .screen {
        overflow: hidden;
        margin-top: 20px;
        height: auto;
        > div {
            float: left;
            margin: 0 20px 20px 0;
        }
        .btns {
            margin: 4px 0 20px 0;
        }
    }
    .commodity {
        .header + div {
            overflow: hidden;
            margin-top: 20px;
            > div {
                float: right;
            }
        }
        .conter {
            position: relative;
            background: #c0c4cc;
            padding: 20px 0;
            margin-top: 20px;
            display: flex;
            text-align: center;
            box-shadow: none;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            color: #f3f3f3;
            > div {
                flex: 1;
                > div {
                    height: 80px;
                    line-height: 80px;
                    font-size: 16px;
                }
            }
            p {
                position: absolute;
                width: 90%;
                height: 1px;
                top: 90px;
                background: #333;
                box-sizing: border-box;
                padding: 0 5%;
                margin-left: 5%;
            }
        }
    }
}
</style>
